<template>
  <div class="login">
      <img src="../../assets/images/login/login_03.png" alt="" class="login_img">
    <div class="login_join">
      <div class="login_list" style="position: relative;">
        <ul>
          <h2>登录</h2>
          <li style="padding-bottom:25px;">
              <i class="fa fa-mobile-phone (alias) fa-2x" style="position: absolute;top: 33%;color:rgb(140, 136, 136)"></i>
            <input type="text"  style="font-size: 15px;#aaaaaa;padding-left: 22px;color:#AAAAAA" v-model="phone" placeholder="请输入手机号">
          </li>
          <li>
            <!-- <input type="text" v-model="mm" placeholder="密码"> -->
            <div class="login_entry">
			<div class="login_vaildate">
				<div class="login_vaildate_left" style="margin-top: 4%;">
					<img src='../../assets/login_07.png' style="width: 16px;height: 18px;"/>
					<input style="padding-left: 10px;" type="number" name="" id="" placeholder="请输入短信验证码" v-model="code" />
				</div>
				<div class="login_vaildate_right" @click.stop="Code">
					<button :disabled="!sendAuthCode" :style="{background: sendAuthCode ? '#444444' : '#cdcdcd'},{color:sendAuthCode ? '#fff' : '#fff'}"> {{sendAuthCode ? '发送验证码' : '重新获取' + auth_time + '秒' }}</button>
				</div>

			</div>

		</div>
          </li>
          <li>
            <!-- <el-select v-model="value" placeholder="请选择您的身份">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> -->
          </li>
        </ul>
        <div @click.stop="Landed" class="login_btn">登录</div>
      </div>
    </div>

    <div class="login_most">
        <span></span>
        <p>蜗牛瑜家<font></font>一个专注于场馆整合的平台</p>
        <span></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        phone:'',
        sendAuthCode: true,
        /*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0,
        /*倒计时 计数器*/
        phone: "", //手机号
        code: "", //验证码
        // coachid: "",
        sessionid: "",
        select_address: "",
        about_coach: "",
        main: "",
        downIcon: true,
         options: [{
          value: '选项1',
          label: '蜗牛瑜家超管'
        }, {
          value: '选项2',
          label: 'BOSS'
        }, {
          value: '选项3',
          label: '前台服务'
        }],
        value: ''
    };
  },
  methods: {
    Landed() {
        // console.log(this.phone == '')
      let _this = this;
      let qs = require("qs");
      if (_this.phone) {
        let phone = this.phone; //手机号
        let code = this.code; //验证码
        let obj = {
          phone,
          code
        };
        if (this.phone == '') {
            this.$message({
                    type: 'error',
                    message: '请填写您的手机号!'
                });
          return;
        }
        if (!this.code) {
           this.$message({
                    type: 'error',
                    message: '请填写手机号验证码!'
                });
          return;
        }
        if(this.downIcon){
           _this.$axios.post("/yujiaextend/gymadmin/yogaGymAdminLogin", qs.stringify(obj), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then((response) =>{

            if (response.data.code == "1") {
              window.localStorage.setItem(
                "gym_sessionid",
                JSON.stringify(response.data.data)
              );
              //  mui.toast(response.data.message);
               _this.$message({
                    type: 'success',
                    message: response.data.message
                });
                // console.log(response.data.data.admin_type)
               if(response.data.data.admin_type=='1'){
                  _this.$router.push({
                path: "/Library_management",
                query: {}
              });

               }else if(response.data.data.admin_type=='2'){
                   _this.$router.push({
                path: "/MyIncome",
                query: {}
              });

               }else if(response.data.data.admin_type=='3'){
                   _this.$router.push({
                path: "/MyIncome",
                query: {}
              });

               }else if(response.data.data.admin_type=='4'){
                   _this.$router.push({
                path: "/MyIncome",
                query: {}
              });

               }
             
            } else if (response.data.code == "-2") {
               _this.$message({
                    type: 'error',
                    message: response.data.message
                });
            } else if (response.data.code == "0") {
               _this.$message({
                    type: 'error',
                    message: response.data.message
                });
            } else if (response.data.code == "-4") {
               _this.$message({
                    type: 'error',
                    message: response.data.message
                });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
          
        }

       
      } else {
         _this.$message({
                    type: 'error',
                    message: '请输入手机号码'
                });
      }
    },
      Code() {
      let re = /^1\d{10}$/;
      let _this = this;
      if (this.phone) {
        if (re.test(_this.phone)) {
          var phone = _this.phone;
          let obj = {
            phone
          };
          let qs = require("qs");
          _this.$axios
            .post("/yujiaextend/vip/captcha", qs.stringify(obj), {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            })
            .then(response => {
              _this.sendAuthCode = false;
              _this.auth_time = 60;
              var auth_timetimer = setInterval(() => {
                _this.auth_time--;
                if (_this.auth_time <= 0) {
                  _this.sendAuthCode = true;
                  clearInterval(auth_timetimer);
                }
              }, 1000);
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          _this.sendAuthCode = true;
          _this.$message({
                    type: 'error',
                    message: '手机号格式不正确,请重新输入!'
                });
        }
      } else {
        _this.sendAuthCode = true;
         _this.$message({
                    type: 'error',
                    message: '请输入手机号码!'
                });
      }
    }
  }
};
</script>
<style scoped>
.login .login_img{
    width: 180px;
    height:78px;
    margin-left: 50px;
}
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../assets/images/login/login_bg.jpg) no-repeat;
  background-size: 100% 100%;
}
/* 版心 */
.login_join{
    width: 1000px;
    height: 553px;
    margin: 0 auto;
    margin-top:7%;
    background: url(../../assets/images/login/login_05.png) no-repeat;
    background-size: 100% 100%;
    border-radius:15px;
   box-shadow: 0 1px 18px 1px rgba(77, 171, 255, .2);
}
.login_join .login_list{
    widows: 546px;
    height: 100%;
    margin-left: 460px;
    text-align: center;
}
.login_join .login_list ul{
    width: 100%;
}
.login_join .login_list ul h2{
    padding-top: 82px;
    font-size:36px;
    color: #396afe;
}
.login_join .login_list ul li{
    width:395px;
    padding-top:60px;
    border-bottom: 1px solid #cdcdcd;
    padding-bottom: 13px;
    margin: 0 auto;
}
.login_join .login_list ul li:last-child{
    border-bottom: 0;
    padding-top:45px
}
.login_join .login_list ul li input{
    width: 100%;
    border: none;
    outline: none;
    font-size:18px;
    color: #606060;
    padding-left: 10px;
}
.login_join .login_list ul li .el-select{
    width: 100%;
    border: none!important;

}
.login_join .login_list ul li .el-select .el-input{
    width: 100%;
    border: none!important;

}
.login_join .login_list ul li .el-select .el-input .el-input__inner{
    border: none!important;
    outline: none;
}
.login_join .login_list .login_btn{
    width: 350px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    /* margin-top: 65px; */
    background: url(../../assets/images/login/login_07.png) no-repeat;
    background-size: 100% 100%;
    font-size: 18px;
    color: #fff;
    letter-spacing: 4px;
}
/* 版心结束 */
.login_most{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position:absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login_most span{
width: 55px;
height: 1px;
background: #0052da;
}
.login_most p{
    font-size: 16px;
    color: #0052da;
    margin: 0 5px;
     display: flex;
    align-items: center;
}
.login_most p font{
    display:inline-block;
    width: 2px;
    height: 2px;
    background: #0052da;
    border-radius: 50%;
    margin: 0 3px;
}
.login_entry {
  width: 92%;
  height: 72px;
}
/*请输入手机号*/
.login_entry .login_tel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem /* 20/16 */ 0;
}
.login_entry .login_tel .login_tel_left {
  display: flex;
  align-items: center;
}

.login_entry .login_tel .login_tel_left input {
  width: 100%;
  padding: 0;
  padding-left: 15px;
  border: none;
  outline: none;
  color: #aaaaaa;
  font-size: 0.9375rem /* 15/16 */;
  background: none;
  
}
 input::placeholder {
  color: #aaaaaa;
  font-size: 0.9375rem /* 15/16 */;
}
.login_entry .login_tel .login_tel_right img {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
}
/*请输入手机号结束*/

/*请输入短信验证*/

.login_entry .login_vaildate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem /* 20/16 */ 0;
  position: relative;
}
.login_entry .login_vaildate .login_vaildate_left {
  width: 70%;
  display: flex;
  align-items: center;
}

.login_entry .login_vaildate .login_vaildate_left input {
  width: 100%;
  padding: 0;
  padding-left: 12px;
  border: none;
  outline: none;
  font-size: 0.875rem;
  background: none;
  color: #aaaaaa;
  font-size: 0.9375rem /* 15/16 */;
}
.login_entry .login_vaildate .login_vaildate_left input::placeholder {
  color: #aaaaaa;
  font-size: 0.9375rem /* 15/16 */;
}
.login_entry .login_vaildate .login_vaildate_right button {
  position: absolute;
  right: 0;
  top: 2.3375rem;
  line-height:1.125rem /* 18/16 */;
  padding: 0.3125rem /* 5/16 */ 0.5rem /* 8/16 */;
  border: none;
  background: #444444;
  color: #000000;
  border-radius: 0.9375rem;
  font-size: 0.75rem /* 12/16 */;
  outline: none;
}

</style>


